﻿@import '../../Geral/_mixins.scss';
@import '../../Geral/_styles.scss';
@import '../../Geral/_variaveis.scss';

body {
	@include marginpadding();
	font-family: 'Segoe UI';
	font-weight: lighter;
	font-size: 40px;

	h2 {
		@include marginpadding();
		margin: 5px;
		padding: 10px;
		text-transform: uppercase;
		font-family: 'Segoe UI';
		font-weight: normal;
		font-size: 30px;
		color: $vermelho;
		border-bottom: 4px solid $vermelho;
	}

	h3 {
		@include marginpadding();
		font-family: 'Segoe UI';
		font-weight: lighter;
		font-size: 50px;
		margin-bottom: 20px;
	}

	#sectionPage {
		@include float(1000px, 100%, 0, 0, true);

		#headerPage {
			@include float(100px, 96%);
			padding-left: 2%;
			padding-right: 2%;
			padding-bottom: 30px;
			background: #eee;
			color: $vermelho;

			#articleLogo {
				@include float(100px, 20%);
				background: url('../../Imagens/imgs/logo.png') no-repeat left bottom;
				background-size: contain;
			}

			#articlePesquisa {
				@include float(100px, 60%);
				line-height: 100px;

				#txtPesquisa {
					@include marginpadding();
					height: 70px;
					width: 75%;
					border: 2px solid $vermelho;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					font-size: 30px;
				}

				.divBotoesPesquisar {
					position: relative;
					top: -100px;
					left: 76%;
					width: 20%;

					#btnPesquisarTodoSite {
						height: 70px;
						width: 45%;
						border: none;
						background: $vermelho;
						color: $branco;
						font-family: 'Segoe UI';
						font-size: 20px;
					}

					#btnPesquisarLoja {
						@include marginpadding();
						height: 70px;
						width: 45%;
						border: none;
						background: #ccc;
						color: $vermelho;
						font-family: 'Segoe UI';
						font-size: 20px;
					}
				}
			}

			#navCliente {
				@include float(100px, 20%);
				text-align: right;
				line-height: 100px;
				font-size: 30px;

				ul {
					@include marginpadding();
					list-style: none;

					li {
						display: inline;
						position: relative;
						background: $vermelho;
						color: $branco;
						padding: 10px;
						margin-left: 10px;

						a {
							display: inline-block;
							padding-left: 20px;
						}

						ul {
							display: none;
							position: absolute;
							left: -140px;
							padding: 0;
							width: 370px;
							background: white;
							z-index: 999;
							line-height: 70px;

							li {
								margin: 0;
								display: inline-block;
								width: 350px;
								line-height: 1.5em;
								background: darken($vermelho, 10%);
							}
						}

						&:hover {
							background: darken($vermelho, 10%);

							& > ul {
								display: block;
							}
						}
					}
				}
			}
		}

		#headerLoja {
			@include float(350px, 96%);
			padding: 0 2%;

			#sectionLogoLoja {
				@include float(300px, 25%);

				img {
					max-height: 290px;
					max-width: 100%;
				}
			}

			#sectionCabecalhoLoja {
				@include float(200px, 70%, 0, 5%);
				font-weight: normal;
				line-height: 200px;

				#articleRating {
					display: inline-block;
					padding-left: 20px;

					img {
						height: 40px;
					}

					#lblRatingPositivo {
						color: green;
					}

					#lblRatingNegativo {
						color: $vermelho;
					}

					#btnLike, #btnDislike {
						height: 40px;
					}
				}
			}

			#navLoja {
				@include float(100px, 70%, 0, 5%);
				line-height: 100px;

				ul {
					@include marginpadding();
					list-style: none;

					li {
						display: inline;

						a {
							display: inline-block;
							padding: 0 20px;
						}
					}
				}
			}

			#sectionNavegacao {
				@include float(50px, 100%);
				line-height: 50px;
				font-size: 20px;
				text-decoration: none;
			}
		}

		#articleDadosLoja {
			@include float(50px, 100%);
			padding: 10px 0;
			color: black;
			font-size: 30px;
			line-height: 50px;
			text-align: center;
			background: white;

			#btnFacebookLoja, #btnPinterestLoja, #btnRSSLoja, #btnTwitterLoja {
				height: 40px;
			}
		}

		#footerPage {
			@include float(500px, 96%, 40px);
			padding: 20px 2%;
			background: #eee;

			#articleRedesSociais {
				@include float(100%, 25%);
				font-size: 30px;

				table {
					tr {
						td {
							vertical-align: central;
							padding: 10px;
						}
					}
				}
			}

			#articleTutoriais, #articleSAC, #articleParceiros {
				@include float(100%, 25%);
				font-size: 30px;

				ul {
					@include marginpadding();
					list-style: none;

					li {
						@include marginpadding(5px);
					}
				}
			}
		}
	}
}


.link {
	text-decoration: none;
	color: white;
}
